<template>
	<view class="center">
		<!--个人页中的话题-->
		<view class="container">
			<tui-card v-for="(topicView,index) in topicViews" :key="index" :title="topicView.title" :tag="topicView.time" @tap="jumpTopic(topicView.id)">
				<!--内容-->
				<template v-slot:body>
					<view class="tui-default" v-text="topicView.content">
					</view>
					<view class="imgs" >
						<image class="image" v-for="(imgUrl,index) in topicView.images"  :src="imgUrl" :key="index"></image>
					</view>
				</template>
				<!--底部-->
				<template v-slot:footer>
					<view class="tui-default">
						<tui-icon :name="'eye'" :size="20" :color="'#666666'"></tui-icon>
						<text v-text="'   ' + topicView.viewsNum + '  '">
							
						</text>
						
						<tui-icon :name="'message'" :size="20" :color="'#666666'"></tui-icon>
						<text v-text="'   ' + topicView.commemtNum  + '  '"></text>
						
						
						<tui-icon :name="'agree'" :size="20" :color="'#666666'"></tui-icon>
						<text v-text="'   ' + topicView.likeNum + '  '"></text>
					</view>
				</template>
			</tui-card>
			<tui-nomore v-if="!allowLoading"></tui-nomore> <!--显示没有更多数据-->
		</view>	
	</view>
</template>

<script>
	import htmlUtils from "@/utils/HtmlUtils.js"
	import textUtils from "@/utils/TextUtils.js"
	import relativeTimeGetter from "@/utils/RelativeTimeGetter.js"
	import communityApi from "@/request/api/communityApi.js"
	const topicUrl = "/pages/community/topicInfo"
	export default {
		data() {
			return {
				topics:[],
				topicViews:[ 
					// {
					//	id:'',
					// 	title:{
					// 		text: "手写JVM教程",
					// 		color: "#101010",
					// 		size: 35
					// 	},
					// 	content:'首先打开',
					// 	time:{
					// 		text: "1小时前"
					// 	},
					// 	images:["/static/logo.png","/static/logo.png"],
					// 	viewsNum:0,
					// 	commemtNum:0,
					// 	likeNum:0
					// }
				],
				page:{
					current:1,
					size:10
				},
				allowLoading:true,//是否允许加载，如果数据已经全部拉取完毕，就可以关闭了
			}
		},
		props:{
			userId: {
				type: String,
				default: ''
			},
		},
		created() {
			this.getTopics();
		},
		mounted(){
			uni.$on('onReachBottom',(currentTab)=>{//监听父组件触底事件，触底拉取数据
				if(this.allowLoading && currentTab=='topic'){
					this.getTopics();
				}
			});
		},
		computed: {
			
		},
		watch:{
			topics(){//监听话题数组，当它发生变化时，重新格式化话题视图数组
				this.formatToTopicViews();	
			}
		},
		methods: {
			//获取用户的话题
			getTopics(){
				communityApi.listTopicByUserId(this.userId,this.page).then((data)=>{
					if(data.code == 0){
						this.topics = [...this.topics,...data.page.list];
						if(data.page.list.length < this.page.size){
							this.allowLoading = false;
						}
						this.page.current++;
					}
				})
			},
			//将所有话题格式化
			formatToTopicViews(){
				//console.log(this.topics)
				this.topicViews = []
				this.topics.forEach((topic)=>{
					let topicView = this.formatToTopicView(topic);
					this.topicViews.push(topicView)
				})
				console.log(this.topicViews)
			},
			//格式化一个话题
			formatToTopicView(topic){
				let topicView = {};
				let title = textUtils.beyondLimitSubStr(topic.title,15,'...');
				let content =  htmlUtils.getText(topic.threadsText)  //获取纯文本，因为这块的内容有可能时富文本内容
				content = textUtils.beyondLimitSubStr(content,40,'...');
				topicView.id=topic.id;
				topicView.title = {text:title,color: "#101010",size: 40}
				topicView.content = content
				topicView.images = htmlUtils.getImageUrls(topic.threadsText,3) //注意，这里还需要把话题的图片提取出来
				topicView.time = { text:relativeTimeGetter.getText(topic.createTime) }
				topicView.viewsNum = topic.viewCount==null?0:topic.viewCount;
				topicView.commemtNum = topic.replyCount==null?0:topic.replyCount;
				topicView.likeNum = topic.praiseCount==null?0:topic.praiseCount;
				return topicView;
			},
			jumpTopic(id){
				uni.navigateTo({
					url:`${topicUrl}?topicId=${id}`
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	
	.tui-card-header{
		font-weight: bold;
	}
	.tui-default {
		padding: 20rpx 30rpx;
	}
	.tui-card{
		margin-top:20rpx;
	}
	
	//图片
	.imgs{
		position:relative;
		padding: 5rpx 30rpx;
	}
	
	.image{
		width: 100rpx;
		height: 100rpx;
		padding: 0rpx 5rpx;
	}
	
</style>
